<template>
    <el-container>
      <el-header style="background-color: #67C23A;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <h1>疫苗预约系统</h1>
      </el-header>
      <el-main class="login-contain" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
        <h2 >登录</h2>
        <el-form style="margin-right: 30px" :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
          <el-form-item
              label="身份证"
              prop="account"
              :rules="[{ required: true, message: '身份证不能为空'}]"
          >
            <el-input v-model.number="numberValidateForm.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
              label="手机号"
              prop="password"
              :rules="[
      { required: true, message: '手机号不能为空'}
    ]"
          >
            <el-input v-model.number="numberValidateForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="display: flex;flex-direction: row;justify-content: space-between">
              <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
              <el-link type="primary" @click="register">注册</el-link>
            </div>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
</template>

<script>
export default {
  name: "UserLogin",
  data() {
    return {
      numberValidateForm: {
        account: '',
        password:''
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios({
            url:'http://localhost:88/api/user/users/login',
            method:'post',
            data:{
              account:this.numberValidateForm.account,
              password:this.numberValidateForm.password
            }
          }).then(res => {
            console.log(res)
            if (res.data.data === '201'){
              this.$message.error('请先注册!');
            }else{
              localStorage.setItem("userManager",JSON.stringify(res.data.data))
              this.$router.replace({path:'usermanager'})
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    register(){
      this.$router.push({path:'/userRegister'})
    }
  }
}
</script>

<style scoped>
.login-contain{
  margin-top: 200px;
}
</style>
